<template>
  <!-- <a-drawer
    destroy-on-close
    title="事件详情"
    placement="right"
    width="100%"
    class="fra-drawer fra-drawer-s"
    :closable="true"
    :mask="false"
    :visible="eventDetailsVisible"
    @close="onClose"
  > -->

  <a-modal
    :mask-closable="false"
    :visible="eventDetailsVisibleF"
    title="事件详情"
    :class="[
      'c-dialog-box ed-dialog-box',
      singlePage ? 'c-dialog-box-full' : ''
    ]"
    :dialog-style="{ height: '650px' }"
    :footer="null"
    :width="1260"
    :closable="!singlePage"
    centered
    :z-index="modalZIndexM"
    @cancel="onClose"
  >
    <span
      slot="closeIcon"
      class="c-close-icon"
    ><a-icon
      :component="require('@/assets/icon/close.svg')"
    /></span>
    <span
      v-if="!singlePage"
      class="new-page-btn"
      @click="goNewPageHandler(eduuid)"
    ><a-icon
      :component="require('@/assets/icon/newPage.svg')"
    /></span>

    <a-spin :spinning="eventDetailLoading" class="c-dialog-search-box">
      <!-- info -->
      <template v-if="prevNextEdBtnShow">
        <a-icon
          type="double-left"
          :class="['prev-ed-btn', preClickable ? '' : 'disable-ed-change']"
          @click="prevEdHandler"
        />
        <a-icon
          type="double-right"
          :class="['next-ed-btn', nextClickable ? '' : 'disable-ed-change']"
          @click="nextEdHandler"
        />
      </template>

      <a-row class="c-dialog-search-box-2">
        <a-col :span="2" class="pri-icon-out-box pt-12">
          <noticePriorityIcon
            :is-etops="currentRow.isEtops"
            :priority="currentRow.priority"
            :msg-type="currentRow.name"
          />
          <div class="d-flex flex-column">
            <!-- <a-icon v-if="currentRow.etopsFlight" class="airplane-landing" :component="require('@/assets/icon/Fleet_Status_ETOPS.svg')" /> -->
            <!-- <a-icon v-if="currentRow.alertNotPriority >= 0" class="alert-landing" :class="['`notice-alert-${currentRow.priority}`']" :component="require('@/assets/icon/Alert_notice.svg')" /> -->
          </div>
          <!-- <priorityIcon :priority="currentRow.priority" /> -->
        </a-col>
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">机号</div>
          <a
            class="fs-16 fw-b numbers"
            @click="setState({ key: 'flightLegHistoryVisible', payload: true })"
          >{{ currentInfo.tailnumber || '--' }}</a>
        </a-col>
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">机队</div>
          <div class="fs-16 fw-b color-title numbers">
            {{ currentRow.fleet || '--' }}
          </div>
        </a-col>
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">航班</div>
          <a
            class="fs-16 fw-b numbers"
            @click="setState({ key: 'flightLegDetailsVisible', payload: true })"
          >{{ currentInfo.flightNo || '--' }}</a>
        </a-col>
        <a-col :span="1">
          <div class="fw-b fs-12 color-r">航段</div>
          <div class="fs-16 fw-b color-title numbers">
            {{ $legHandler(currentInfo.leg, currentRow.totalLeg) }}
          </div>
        </a-col>
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">管控状态</div>
          <div class="fs-16 fw-b color-title numbers colorBlue">
            {{ currentRow.controlState || '待处理' }}
          </div>
        </a-col>
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">更新时间</div>
          <div class="fw-b fs-13">
            <span class="fs-18 color-title mr-4 numbers">{{
              currentRow.latestAcarsTime
                ? $moment.utc(currentRow.latestAcarsTime).format('HH:mm')
                : '--'
            }}</span>
            <span class="color-s numbers">{{
              currentRow.latestAcarsTime
                ? $moment.utc(currentRow.latestAcarsTime).format('MM-DD')
                : '--'
            }}</span>
          </div>
        </a-col>
        <a-col :span="3">
          <div class="fw-b fs-12 color-r">机场</div>
          <div class="fs-16 fw-b color-title">
            <a
              @click="
                airportInfoHandler(
                  eventDetail[itemActiveIndex]
                    ? eventDetail[itemActiveIndex].dep
                    : ''
                )
              "
            >{{
              eventDetail[itemActiveIndex]
                ? eventDetail[itemActiveIndex].dep
                : '--'
            }}</a>
            <span class="c-arrow color-s">····</span>
            <a
              @click="
                airportInfoHandler(
                  eventDetail[itemActiveIndex]
                    ? eventDetail[itemActiveIndex].arr
                    : ''
                )
              "
            >{{
              eventDetail[itemActiveIndex]
                ? eventDetail[itemActiveIndex].arr
                : '--'
            }}</a>
          </div>
        </a-col>

        <a-col :span="2">
          <div class="text-c mt-10">
            <oooiSvg :step="oooiStep.step" :time="oooiStep.time" />
          </div>
        </a-col>
        <a-col :span="4">
          <sliderItem
            v-if="currentRow.event"
            :current-leg-info="currentLegInfo"
          />
        </a-col>
        <a-col :span="4">
          <div class="text-r mt-18 pr-30">
            <reportList
              :record="reData"
              :events="true"
              :report-handler="reportHandler"
            />
          </div>
        </a-col>
      </a-row>
    </a-spin>
    <!-- 事件处理start -->
    <eventProcessing @corStatus="corStatus" :md_processing_Status="md_processing_Status"/>
    <status-processing :statusCode="currentSta" @update_status="update_status" :currentRow="currentRow" :eventId="currentRow.id" ref="spform"/>
    <!-- 事件处理end -->
    <a-spin :spinning="eventDetailLoading" class="ed-dialog-box-1">
      <!-- 消息历史 -->
      <!-- <div class="fs-14 mb-8 mt-12 fw-b font-c-b text-color-21252e">历史消息</div> -->
      <div
        :class="[
          'dot-top-number mb-8 mt-8',
          !historicalSegmentPointReversed ? 'fc-rr' : ''
        ]"
      >
        <span v-for="di in 15" :key="di" class="dot-top-number-item">
          {{ dotNumHandler(di) }}
        </span>
      </div>
      <div class="ed-details-item-sc beauty-scroll">
        <a-row
          v-for="(item, index) in eventDetail"
          :key="item.id"
          class="ed-details-item-box"
          :class="{ 'ed-details-item-box-active': itemActiveIndex === index }"
        >
          <a-col
            :span="24"
            class="ed-details-item-li"
            :class="{
              'ed-details-item-sub-active':
                itemActiveIndex === index && itemActiveCIndex === -1
            }"
            @click.native="clickHandler(index)"
          >
            <a-row
              class="d-flex-i ai-center cu-pointer pt-5 pb-5 ed-details-item-li-in"
            >
              <a-col :span="2">
                <noticePriorityIcon
                  :is-etops="item.isEtops"
                  :priority="item.priority"
                  :msg-type="item.name"
                />
              </a-col>
              <a-col :span="2">
                <div v-if="item.msgType === 'Alert'" class="fw-b">
                  {{ item.msgType }}
                </div>
                <span
                  v-if="item.msgType !== 'Alert'"
                  :class="[item.msgType === 'Alert' ? '' : 'fw-b']"
                >{{ item.name }}</span>
              </a-col>
              <a-col :span="5">
                <a-row>
                  <a-col :span="12">
                    <span class="text-color-5a87f7">{{
                      item.code || '--'
                    }}</span>
                  </a-col>
                  <a-col v-if="item.msgType !== 'Alert'" :span="12">
                    <span class="text-color-5a87f7">{{
                      item.activity ? activeHandler(item.activity) : '--'
                    }}</span>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="5">
                <span
                  class="fs-13 text-color-5a87f7 text-over"
                  :title="item.description"
                >{{ item.description }}</span>
              </a-col>
              <!-- <a-col :span="1" class="ed-w-5">
                <span class="text-over fs-13">{{ $legHandler(currentInfo.leg,currentRow.totalLeg) }}</span>
              </a-col>
              <a-col :span="4" class="ed-w-6">
                <span class="text-over fs-13">{{ item.msgTime? $moment.utc(item.msgTime).format('YYYY-MM-DD HH:mm') :'--' }}</span>
              </a-col>
              <a-col :span="2" class="ed-w-7">
                <span class="text-over fs-13">{{ item.activity?activeHandler(item.activity):'--' }}</span>
              </a-col>-->
              <a-col :span="10" class="ed-w-8 hide_circle">
                <dotHistory
                  :event-type="
                    item.msgType === 'Alert' ? item.msgType : item.name
                  "
                  :code="item.code"
                  :tailnumber="item.tailnumber"
                  :data="item.legs"
                  :dot-type="item.legsStatus"
                  :c-leg="currentInfo.leg"
                  :leg="$legHandler(currentInfo.leg, currentRow.totalLeg)"
                  :dot-num="15"
                  class="jc-end"
                  :i-width="24"
                  :show-number="false"
                />
              </a-col>
            </a-row>
            <!-- <a-row v-if="item.name==='MMSG'" class="ed-details-msg-show-box">
              <a-col :span="17" :offset="7">
                <div class="fs-12"><span class="fw-b">Fault Report Code</span>：{{ item.frc||'--' }}</div>
                <div class="fs-12"><span class="fw-b">Monitor Code</span>：{{ item.mc||'--' }}</div>
              </a-col>
            </a-row> -->
          </a-col>

          <template v-if="item.eventDetails && item.eventDetails.length > 0">
            <a-col
              v-for="(ci, cIndex) in item.eventDetails"
              :key="ci.id"
              :span="24"
              :class="[
                'ed-deitals-sub-item-box',
                ci.name === 'MMSG' ? 'cu-pointer' : '',
                itemActiveIndex === index && itemActiveCIndex === cIndex
                  ? 'ed-details-item-sub-active'
                  : ''
              ]"
              @click.native.stop="clickHandler(index, cIndex)"
            >
              <a-row>
                <a-col :span="24">
                  <a-row
                    class="d-flex-i ai-center cu-pointer pt-5 pb-5 ed-details-item-li-in"
                    style="width: 100%"
                  >
                    <a-col :span="2" class="d-flex">
                      <noticePriorityIcon
                        :is-etops="ci.isEtops"
                        :priority="ci.priority"
                        :msg-type="ci.name"
                      />
                    </a-col>
                    <a-col :span="2">
                      <div v-if="ci.msgType === 'Alert'" class="fw-b">
                        {{ ci.msgType }}
                      </div>
                      <span
                        v-if="ci.msgType !== 'Alert'"
                        :class="[ci.msgType === 'Alert' ? '' : 'fw-b']"
                      >{{ ci.name }}</span>
                    </a-col>
                    <a-col :span="5">
                      <a-row>
                        <a-col :span="12">
                          <span class="text-color-5a87f7">{{
                            ci.code || '--'
                          }}</span>
                        </a-col>
                        <a-col v-if="ci.msgType !== 'Alert'" :span="12">
                          <span class="text-color-5a87f7">{{
                            ci.activity ? activeHandler(ci.activity) : '--'
                          }}</span>
                        </a-col>
                      </a-row>
                    </a-col>
                    <a-col :span="5">
                      <span
                        class="fs-13 text-color-5a87f7 text-over"
                        :title="ci.description"
                      >{{ ci.description }}</span>
                    </a-col>

                    <a-col :span="10" class="ed-w-8 hide_circle">
                      <dotHistory
                        :event-type="
                          ci.msgType === 'Alert' ? ci.msgType : ci.name
                        "
                        :code="ci.code"
                        :tailnumber="ci.tailnumber"
                        :data="ci.mmsgLegs"
                        :c-leg="currentInfo.leg"
                        :leg="$legHandler(currentInfo.leg, currentRow.totalLeg)"
                        :dot-type="ci.mmsgLegStatus"
                        :dot-num="15"
                        :i-width="24"
                        class="jc-end"
                        :show-number="false"
                      />
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-col>
          </template>
        </a-row>
      </div>

      <!-- 详情 -->
      <div class="ed-details-item-main-box beauty-scroll">
        <a-row
          class="ed-details-item-box"
          :style="{
            'border-color': priorityHandler(currentSelectedRow.priority).color
          }"
        >
          <a-col :span="24">
            <a-row class="d-flex-i ai-center">
              <a-col :span="2">
                <noticePriorityIcon
                  :is-etops="currentSelectedRow.isEtops"
                  :priority="currentSelectedRow.priority"
                  :msg-type="currentSelectedRow.name"
                />
                <!-- <noticePriorityIcon :is-etops="currentSelectedRow.isEtops" :priority="currentSelectedRow.priority" :msg-type="currentSelectedRow.name" /> -->
              </a-col>
              <a-col :span="3">
                <div class="fw-b text-color-21252e">
                  {{
                    currentSelectedRow.msgType === 'Alert'
                      ? currentSelectedRow.msgType
                      : ''
                  }}
                </div>
                <span
                  :class="[
                    'fs-14  va-top text-color-21252e',
                    currentSelectedRow.msgType === 'Alert' ? '' : 'fw-b'
                  ]"
                >{{ currentSelectedRow.name || '--' }}</span>
              </a-col>

              <a-col :span="3">
                <span class="fw-b fs-14 va-top text-color-21252e">{{
                  currentSelectedRow.code || '--'
                }}</span>
              </a-col>

              <a-col :span="16">
                <span class="fw-b fs-14 va-top text-color-21252e">
                  {{ currentSelectedRow.description || '--' }}</span>
              </a-col>
            </a-row>
          </a-col>

          <!-- FDE/MMO/SMT -->
          <a-col
            v-if="
              currentSelectedRow.msgType !== 'Alert' &&
                currentSelectedRow.name !== 'MMSG'
            "
            :span="22"
            :offset="2"
            class="mt-8"
          >
            <a-row>
              <a-col :span="5">
                <div class="fs-12 text-color-505363">状态</div>
                <div class="fs-12 text-color-505363">
                  {{ activeHandler(currentSelectedRow.activity) || '--' }}
                </div>
              </a-col>

              <a-col :span="12">
                <div class="fs-12 text-color-505363">消息时间</div>
                <div class="fs-12 text-color-505363">
                  {{
                    currentSelectedRow.msgTime
                      ? $moment
                        .utc(currentSelectedRow.msgTime)
                        .format('YYYY-MM-DD HH:mm')
                      : '--'
                  }}
                </div>
              </a-col>
            </a-row>
          </a-col>
          <!-- mmsg -->
          <a-col
            v-if="currentSelectedRow.name === 'MMSG'"
            :span="22"
            :offset="2"
            class="mt-8"
          >
            <a-row>
              <a-col :span="16">
                <a-row>
                  <a-col :span="6">
                    <div class="fs-12 text-color-505363">状态</div>
                    <div class="fs-12 text-color-505363">
                      {{ activeHandler(currentSelectedRow.activity) || '--' }}
                    </div>
                  </a-col>

                  <a-col :span="6">
                    <div class="fs-12 text-color-505363">频次</div>
                    <div class="fs-12 text-color-505363">
                      {{ currentSelectedRow.intermittence || '--'
                      }}{{
                        $isNull(currentSelectedRow.intermittenceNum)
                          ? ''
                          : `（${currentSelectedRow.intermittenceNum}）`
                      }}
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="fs-12 text-color-505363">时间</div>
                    <div class="fs-12 text-color-505363">
                      {{
                        currentSelectedRow.msgTime
                          ? $moment
                            .utc(currentSelectedRow.msgTime)
                            .format('YYYY-MM-DD HH:mm')
                          : '--'
                      }}
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="fs-12 text-color-505363">飞行阶段</div>
                    <div class="fs-12 text-color-505363">
                      {{ currentSelectedRow.phase || '--' }}
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="fs-12 text-color-505363">Fault Report Code</div>
                    <div class="fs-12 text-color-505363">
                      {{ currentSelectedRow.frc || '--' }}
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="fs-12 text-color-505363">Monitor Code</div>
                    <div class="fs-12 text-color-505363">
                      {{ currentSelectedRow.mc || '--' }}
                    </div>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span="8">
                <div class="fs-12 text-color-505363">Detected by</div>
                <div class="fs-12 text-color-505363">
                  {{ deletedBy.join() }}
                </div>
              </a-col>
            </a-row>
          </a-col>

          <!-- alert -->
          <a-col
            v-if="currentSelectedRow.msgType === 'Alert'"
            :span="22"
            :offset="2"
            class="mt-8"
          >
            <a-row>
              <a-col :span="4">
                <div class="fs-12 text-color-505363">时间</div>
                <div class="fs-12 text-color-505363">
                  {{
                    currentSelectedRow.msgTime
                      ? $moment
                        .utc(currentSelectedRow.msgTime)
                        .format('YYYY-MM-DD HH:mm')
                      : '--'
                  }}
                </div>
              </a-col>
              <a-col :span="16">
                <div class="fs-12 text-color-505363">数据源</div>
                <div class="fs-12 text-color-505363">
                  {{ currentSelectedRow.reportName || '--' }}
                </div>
              </a-col>
              <a-col :span="4">
                <div class="fs-12 text-color-505363">Data Collection Group</div>
                <div class="fs-12 text-color-505363">
                  {{ currentSelectedRow.groupName || '--' }}
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>

        <div class="mt-16 em-slope-box">
          <h4 class="pr-16 fs-14 mb-0 d-flex ai-center">事件描述</h4>
          <div>
            {{ currentSelectedRow.remark || '--' }}
          </div>
        </div>

        <!-- 斜率 -->
        <!-- <a-spin v-if="showChart&&currentSelectedRow.msgType==='Alert'" :spinning="eventBySlopeLoading">
          <div class="mt-16 em-slope-box">
            <h4 class=" pr-16 fs-14 mb-0 d-flex ai-center">斜率</h4>
            <div id="echart" ref="echart" style="height:320px;width:100%;margin-top:12spx;" />
            <div class="em-slope-box-sub">current consumption rate in tank units per dat is {<span>R2:{{ eventBySlope.r2 || 0 }}, minR2:{{ eventBySlope.minR2||0 }}, slope:{{ eventBySlope.slope||0 }}</span>}</div>
          </div>
        </a-spin> -->
        <!-- 关联报告 -->
        <!-- <div class="mt-16 em-slope-box">
          <h4 class=" pr-16 fs-14 mb-0 d-flex ai-center">关联报告</h4>
          <div class="file-list-box">
            <div v-for="(item,index) in filesData" :key="item+index" class="d-flex jc-between">
              <a @click="downloadFileHandler(item.url)">
                {{ item.name }}
              </a>

              <div>
                <span class="mr-24">{{ item.time }}</span>

              </div>

            </div>
          </div>
        </div> -->

        <!-- 上传 -->
        <div class="d-flex mt-16">
          <h4 class="pr-16 fs-14 mb-0 d-flex ai-center">航空公司附件</h4>

          <a-upload :file-list="[]" :before-upload="beforeUpload">
            <a-button
              v-permission="1100"
              size="small"
              type="primary"
              ghost
              :loading="uploadLoading"
            >
              上传
            </a-button>
          </a-upload>
        </div>
        <div class="file-list-box">
          <div
            v-for="(item, index) in filesData"
            :key="item + index"
            class="d-flex jc-between"
          >
            <a @click="downloadFileHandler(item.url)">
              {{ item.name }}
            </a>

            <div>
              <span class="mr-24">{{ item.time }}</span>
              <a-popconfirm
                title="确认删除此文件?"
                ok-type="danger"
                ok-text="确认"
                cancel-text="取消"
                @confirm="delItemHandler(item)"
              >
                <a-button
                  class="del-file-btn-box"
                  type="link"
                  :loading="removeFileLoading"
                >
                  删除
                </a-button>
              </a-popconfirm>
            </div>
          </div>
        </div>

        <!-- 事件信息 -->
        <div class="mt-16 em-slope-box">
          <h4 class="pr-16 fs-14 mb-0 d-flex ai-center">事件信息</h4>
          <a-row>
            <a-col :span="5">
              <div class="fs-12 text-color-505363">Source</div>
              <div class="fs-12 text-color-505363">
                {{ currentSelectedRow.source || '--' }}
              </div>
            </a-col>
            <a-col :span="5">
              <div class="fs-12 text-color-505363">Contact</div>
              <div class="fs-12 text-color-505363">
                {{ currentSelectedRow.contact || '--' }}
              </div>
            </a-col>
          </a-row>
        </div>

        <div v-if="currentRow.eventType == 'Alert'" class="alertDiv">
          事件类型:<span style="color: blueviolet">{{
            currentRow.eventType
          }}</span>
           <div>
              <table class="chart-table" border="1px" width="100%" style="table-layout:fixed;border-right: 0;border-bottom: 0;">
                <tr style="text-align:center">
                  <td class="ct-th">机号</td>
                  <td>{{ tailNumber||'--' }}</td>
                  <td class="ct-th">最新数据值</td>
                  <td>{{ servServiceEchartData.datas&&servServiceEchartData.datas[0]?servServiceEchartData.datas[0].value:'--' }}</td>
                  <td class="ct-th">维修限额</td>
                  <td>{{ servServiceEchartData.serviceAlertLimit||'--' }}</td>
                </tr>
                <tr style="text-align:center">
                  <td class="ct-th">最新数据的日期</td>
                  <td>{{ servServiceEchartData.nowTime?$moment.utc(servServiceEchartData.nowTime).format('YYYY-MM-DD'):'--' }}</td>
                  <td class="ct-th">斜率限额</td>
                  <td>{{ servServiceEchartData.trendSlopeLimit||'--' }}</td>
                  <td class="ct-th">保养限额</td>
                  <td>{{ servServiceEchartData.operationalAlertLimit||'--' }}</td>
                </tr>
              </table>
              <div id="echart" ref="echart_1" style="height:400px;width:100%;margin-top:20px;" />
              <div class="legendBox">
                <div class="APU-item">
                  <div />
                  <span>{{ servServiceEchartData.summaryName }}</span>
                </div>
                <div class="recent-item">
                  <div />
                  <span>Most Recent Date Point</span>
                </div>
                <div v-if="servServiceEchartData.serviceAlertLimit<=maxY&&servServiceEchartData.serviceAlertLimit>=minY" class="service-limit-item">
                  <img src="~@/assets/icon/limit.png" alt="">
                  <span>Service Alert Limit</span>
                </div>
                <div v-if="servServiceEchartData.operationalAlertLimit<=maxY&&servServiceEchartData.operationalAlertLimit>=minY" class="service-limit-item">
                  <img src="~@/assets/icon/limit-red.png" alt="">
                  <span>Operational Limit</span>
                </div>
              </div>
            </div>
        </div>
        <div v-if="handbookFIM">
          <div>FIM手册</div>
          <li v-for="(item, index) of handbookFIM" :key="index">
            <span style="margin-left: 10px;color: #5a87f7;cursor: pointer;" @click="openTab(item.fimPath)">{{ item.fimName }}</span>
          </li>
        </div>
      </div>
    </a-spin>
    <!--管控状态历史/评论-->
     <div  class="tabdiv ed-comment-box">
        <div>
          <a-collapse v-model="activeKey" v-if="controlStateNewHead.userName">
            <a-collapse-panel :bordered="false" :header="controlStateNewHead.userName+':'+controlStateNewHead.createdTime">
              <div v-for="(newitem, index) of controlStateNew" :key="index">
                <div style="font-weight: 700;">{{ newitem.key }}</div>
                <div> {{ newitem.value }}</div>
              </div>
              <template v-if="controlStateLog.length > 0">
                <div
                  v-for="item in controlStateLog"
                  :key="item.id"
                  class="ed-comment-item mb-8 fs-12"
                >
                  <div class="d-flex jc-between">
                    <a-row style="font-weight: 700;">	 
                      <a-col :span="24">{{ item.tailNumber }}</a-col>
                      <a-col :span="24" style="text-align:right">{{ item.createdTime }}</a-col>
                    </a-row>
                  </div>
                  <div>
                    <span class="spanws">变更为:</span>{{ item.statuName }}
                  </div>
                </div>
              </template>
            </a-collapse-panel>
          </a-collapse>         
        </div>
        <a-form-model
          ref="ruleForm"
          style="
            margin: 5px 0px 10px 0px;
            overflow: visible;
            padding-right: 0px;
          "
          :model="form"
          :rules="rules"
        >
          <a-form-model-item label="评论" prop="content" class="mb-8-i">
            <a-textarea
              v-model="form.content"
              :auto-size="{ minRows: 3, maxRows: 3 }"
              class="input-type-o"
            />
          </a-form-model-item>
          <a-form-model-item prop="desc" style="text-align: right">
            <a-button
              type="primary"
              :loading="addCommentLoading"
              @click="saveEdContent"
            >
              确认
            </a-button>
          </a-form-model-item>
        </a-form-model>
        <div class="ed-comment-item-box" style="overflow: visible">
          <template v-if="comments.length > 0">
            <div
              v-for="item in comments"
              :key="item.id"
              class="ed-comment-item mb-8"
            >
              <div class="d-flex jc-between">
                <span class="fs-12">{{ item.createBy || '--' }}</span>
                <span class="fs-12">{{
                  item.createTime
                    ? $moment.utc(new Date()).format('MM-DD HH:mm')
                    : '--'
                }}</span>
              </div>
              <div class="fs-12">
                {{ item.content }}
              </div>
            </div>
          </template>
          <div v-else class="text-c">暂无评论</div>
        </div>
      </div>      
    <!-- <div class="ed-comment-box" style="padding-right: 13px" v-if="false">
      <a-tabs type="card" default-active-key="1" @change="tabCallback">
        <a-tab-pane key="1" tab="管控状态" />
        <a-tab-pane key="2" tab="评论" />
      </a-tabs>
      <div v-if="tabindex == 1" class="tabdiv">
        <div>
          <a-row type="flex" align="middle" style="margin-top: 10px">
            <a-col :span="10">状态变更</a-col>
            <a-col :span="14">
              <a-select
                v-model="selval"
                style="width: 100%"
                label-in-value
                @change="handleChange"
              >
                <a-select-option
                  v-for="(item, index) of selectOptionS"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.key }}
                </a-select-option>
              </a-select>
            </a-col>
          </a-row>
          <a-row style="margin: 5px 0px">
            <a-col>
              <a-textarea
                v-model="opinionV"
                :auto-size="{ minRows: 3, maxRows: 3 }"
                class="input-type-o"
                placeholder="备注"
              />
            </a-col>
          </a-row>
          <a-row style="margin: 5px 0px 10px 0px">
            <a-col style="float: right">
              <a-button type="primary" @click="saveControlStateLog">
                确认
              </a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col>
              <div class="ed-comment-item-box">
                <template v-if="controlStateLog.length > 0">
                  <div
                    v-for="item in controlStateLog"
                    :key="item.id"
                    class="ed-comment-item mb-8"
                  >
                    <div class="d-flex jc-between">
                      <span class="fs-12">{{ item.userName || '--' }}</span>
                      <span class="fs-12">{{
                        item.createDate
                          ? item.createDate.substring(5, 16)
                          : '--'
                      }}</span>
                    </div>
                    <div class="fs-12">
                      <span class="spanws">变更为:</span>{{ item.newLabel }}
                    </div>
                    <div class="fs-12">
                      <span class="spanws">备注:</span>{{ item.remark }}
                    </div>
                  </div>
                </template>
                <div v-else class="text-c">暂无备注</div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
      <div v-show="tabindex == 2" class="tabdiv">
        <a-form-model
          ref="ruleForm"
          style="
            margin: 5px 0px 10px 0px;
            overflow: visible;
            padding-right: 0px;
          "
          :model="form"
          :rules="rules"
        >
          <a-form-model-item label="评论" prop="content" class="mb-8-i">
            <a-textarea
              v-model="form.content"
              :auto-size="{ minRows: 3, maxRows: 3 }"
              class="input-type-o"
            />
          </a-form-model-item>
          <a-form-model-item prop="desc" style="text-align: right">
            <a-button
              type="primary"
              :loading="addCommentLoading"
              @click="saveEdContent"
            >
              确认
            </a-button>
          </a-form-model-item>
        </a-form-model>
        <div class="ed-comment-item-box" style="overflow: visible">
          <template v-if="comments.length > 0">
            <div
              v-for="item in comments"
              :key="item.id"
              class="ed-comment-item mb-8"
            >
              <div class="d-flex jc-between">
                <span class="fs-12">{{ item.createBy || '--' }}</span>
                <span class="fs-12">{{
                  item.createTime
                    ? $moment.utc(new Date()).format('MM-DD HH:mm')
                    : '--'
                }}</span>
              </div>
              <div class="fs-12">
                {{ item.content }}
              </div>
            </div>
          </template>
          <div v-else class="text-c">暂无评论</div>
        </div>
      </div>
    </div> -->
  </a-modal>
</template>

<script>
// 图表的数据
import { getChartDataApi } from '@/services/serviceInformation'
import { getServiceConfData } from '@/services/user'
// 查询事件管控状态
import { getEventsStatusDetailApi } from '@/services/fraMonitoring'

import eventProcessing from './eventProcessing.vue'
import statusProcessing from './statusProcessing.vue';
// ____________________________________________________________________
import {
  getControlState,
  getHandbookFIM,
  getStateHistory
} from '@/services/eventMonitoring.js';
import oooiSvg from '@/pages/components/oooi';
import dotHistory from '@/pages/components/dotHistory';
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
import { activeList } from '@/pages/common/constant.js';
import sliderItem from '@/pages/fraMonitoring/components/sliderItem.js';
import reportList from '@/pages/fraMonitoring/reportList';
import { downloadUrl } from '@/utils/util';
import { debounce } from '@/utils/util.js';
export default {
  name:'eventDetailsPage',
  components: {
    oooiSvg,
    dotHistory,
    sliderItem,
    reportList,
    eventProcessing,
    statusProcessing
  },
  props: {
    // currentRow: {
    //   type: Object,
    //   default: () => {}
    // },
    rowIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentSta:'',//当前状态
      tailNumber: null,
      maxY: 0,
      minY: 0,
      servServiceEchartData:{},
      md_processing_Status:{},
      //___________________
      handbookFIM: '', // FIM手册
      tabindex: 1,
      selval: '',
      // selectOptionS: [],
      typeMap:{},
      opinionV: '',
      controlStateNew: [],
      controlStateNewHead:{},
      controlStateLog: [],
      slopeArr: [
        '21-0192-EIS',
        '21-0194L-S704',
        '21-0194R-S704',
        '21-0188a-EIS',
        '21-0189a-EIS',
        '29-0042-S860',
        '29-0043-S860',
        '29-0044-S860'
      ],
      fileList: [],
      form: {
        content: ''
      },
      rules: {
        content: [{ required: true, message: '请填写', trigger: 'change' }]
      },
      columns: [
        {
          title: '文件名',
          align: 'left',
          dataIndex: 'priority',
          width: '80%',
          slots: {
            default: ({ row }) => {
              return row;
            }
          }
        }
      ],
      modalZIndexM: 2000,
      currentRow: {},
      itemActiveIndex: 0,
      itemActiveCIndex: -1,
      activeList,
      reData: {},
      deletedBy: [],
      eduuid: '',
      activeKey: ['1'],
      colData:[
        {code:"id",type:[],value:"",option:{},hidden:true},
        {code:"statusCode",type:[],value:"状态编码",option:{
          "delay":"推迟","close":"关闭","update":"更新","monitor":"监控","processing":"处理中","open":"待处理"
          },hidden:true},
        {code:"createdTime",type:[],value:"创建时间",option:{},hidden:true},
        {code:"pId",type:[],value:"状态处理表id",option:{},hidden:true},
        {code:"userId",type:[],value:"用户id",option:{},hidden:true},
        {code:"userName",type:[],value:"用户账号",option:{},hidden:true},
        {code:"workOrder",type:["update","close"],value:"Work Order",option:{},hidden:false},
        {code:"finishDate",type:["update","close"],value:"完成时间",option:{},hidden:false},
        {code:"troubleShooting",type:["update"],value:"排故操作",option:{"1":"更换部件","2":"测试","3":"量线检查","4":"MEL放行"},hidden:false},
        {code:"removeThe",type:["update"],value:"拆下",option:{},hidden:false,relevance:{"troubleShooting":"1"}},
        {code:"mountUp",type:["update"],value:"装上",option:{},hidden:false,relevance:{"troubleShooting":"1"}},        
        {code:"volumeLineResults",type:["update"],value:"量线结果",option:{},hidden:false,relevance:{"troubleShooting":"3"}},
        {code:"nextDealPlan",type:["update"],value:"后续处理计划",option:{},hidden:false,relevance:{"troubleShooting":"4"}},		
        {code:"ahmBenefit",type:["processing","delay","monitor","update","close"],value:"AHM Benefit",option:{},hidden:false},
        {code:"actionTaken",type:["processing","delay","monitor","update","close"],value:"Action Taken",option:{},hidden:false},
        {code:"closeEvent",type:["update","close"],value:"关闭事件",option:{
          "resolve":"关闭(解决)","resoignorelve":"关闭(忽略)",
          "expire":"关闭(已过期)","noise_info":"关闭(干扰信息)",
          "no_shutdown":"不关闭"
          },hidden:false},
        {code:"additionalComments",type:["processing","monitor","update","close"],value:"Additional Comments",option:{},hidden:false},
        {code:"delayTo",type:["delay"],value:"延期至",option:{},hidden:false},
        {code:"nextPlan",type:["delay"],value:"后续计划",option:{},hidden:false},
        {code:"delayReason",type:["delay"],value:"推迟原因",option:{},hidden:false},
        {code:"flugTag",type:["monitor"],value:"飞行日id",option:{},hidden:false},
        {code:"calendarDay",type:["monitor"],value:"日历日",option:{},hidden:false},
        {code:"leg",type:["monitor"],value:"航段",option:{},hidden:false},
        {code:"legTh",type:["monitor"],value:"第几航段",option:{},hidden:false},
        {code:"appearNum",type:["monitor"],value:"出现次数",option:{},hidden:false},
        {code:"monitoringType",type:["monitor"],value:"监控类型",option:
          {"convention":"常规监控","str":"串件观察","transaction":"办理保留"},hidden:false},
        {code:"ariplane",type:["monitor"],value:"关联飞机",option:{},hidden:false,relevance:{"monitoringType":"str"}},
        {code:"flightNo",type:["monitor"],value:"关联航班",option:{},hidden:false,relevance:{"monitoringType":"str"}},
        {code:"orderNoPre",type:["monitor"],value:"单号前缀",option:{},hidden:false,relevance:{"monitoringType":"transaction"}},
        {code:"orderNoContent",type:["monitor"],value:"保留单号",option:{},hidden:false,relevance:{"monitoringType":"transaction"}}	
      ]
    };
  },
  computed: {
    ...mapState('eventMonitoring', [
      'eventDetailLoading',
      'eventDetail',
      'addCommentLoading',
      'uploadLoading',
      'removeFileLoading',
      'eventBySlopeLoading',
      'eventBySlope',
      'eventList',
      'dataType',
      'dataTypeIndex'
    ]),
    ...mapState('user', ['noticeList']),
    ...mapState('fraMonitoring', ['getEventDetailData']),
    ...mapState('setting', ['historicalSegmentPointReversed']),
    ...mapState('fraMonitoring', [
      'eventDetailsVisible',
      'modalZIndex',
      'activeIndex'
    ]),
    ...mapGetters('fraMonitoring', ['eventDetailsVisibleF']),
    ...mapGetters('user', ['userInfo']),
    dataAcIndex() {
      let acIndex = this.activeIndex;
      if (this.dataType === 2) {
        acIndex = this.dataTypeIndex;
      } else if (this.dataType === 3) {
        acIndex = this.dataTypeIndex;
      }
      return acIndex;
    },
    showChart() {
      return false;
      // return this.slopeArr.includes(this.currentSelectedRow.code);
    },
    prevNextEdBtnShow() {
      if (this.$store.state.eventMonitoring.dataType >= 0) {
        return true;
      } else {
        return false;
      }
    },
    preClickable() {
      return (this.dataAcIndex?.[0] ?? 0) > 0;
    },
    nextClickable() {
      let data = this.eventList;

      if (this.dataType === 1) {
        return (this.dataAcIndex?.[0] ?? 0) + 1 < data.length;
      } else if (this.dataType === 2) {
        data = this.noticeList;
        return (this.dataAcIndex?.[0] ?? 0) + 1 < data.length;
      } else if (this.dataType === 3) {
        data = [
          ...(this.getEventDetailData.currentFlights ?? []),
          ...(this.getEventDetailData.pastFlights ?? [])
        ];
        if (
          typeof this.dataAcIndex[1] !== 'undefined' &&
          this.dataAcIndex[1] !== 0
        ) {
          return (
            (this.dataAcIndex?.[0] ?? 0) + 1 < data.length ||
            ((this.dataAcIndex?.[0] ?? 0) + 1 === data.length &&
              data[this.dataAcIndex?.[0] ?? 0].events.length >
                this.dataAcIndex[1] + 1)
          );
        } else {
          return (this.dataAcIndex?.[0] ?? 0) + 1 < data.length;
        }
      } else {
        return false;
      }
    },
    filesData() {
      return this.eventDetail?.[0]?.files ?? [];
    },
    comments() {
      return this.eventDetail?.[0]?.comments ?? [];
    },
    // dotType() {
    //   return this.currentInfo.activity ? this.activeList.find(item => item.value === this.currentInfo.activity)?.name ?? '--' : '--';
    // },
    currentLegInfo() {
      return {
        ...this.currentInfo,
        ...this.currentRow,
        ...(this.eventDetail?.[0] ?? {})
      };
    },
    currentInfo() {
      return this.currentRow?.event ?? {};
    },
    currentSelectedRow() {
      if (this.itemActiveCIndex > -1) {
        return (
          this.eventDetail[this.itemActiveIndex]?.eventDetails?.[
            this.itemActiveCIndex
          ] ?? {}
        );
      } else {
        return this.eventDetail[this.itemActiveIndex] ?? {};
      }
    },
    oooiStep() {
      let step = 1;
      let time = '';
      const { outTime, offTime, onTime, inTime, phase, latestAcarsTime } =
        this.currentRow;

      if (inTime) {
        step = 5;
        time = this.$moment.utc(inTime).format('HH:mm');
      } else if (onTime) {
        step = 4;
        time = this.$moment.utc(onTime).format('HH:mm');
      } else if (phase === 'ER') {
        step = 3;
        time = latestAcarsTime
          ? this.$moment.utc(latestAcarsTime).format('HH:mm')
          : this.$moment.utc(offTime).format('HH:mm');
      } else if (offTime) {
        step = 2;
        time = this.$moment.utc(offTime).format('HH:mm');
      } else if (outTime) {
        step = 1;
        time = this.$moment.utc(outTime).format('HH:mm');
      }
      return { step, time };
    },
    // deletedBy() {
    //   return this.currentSelectedRow?.eventDetails?.[0]?.detectedBy?.[0] ?? '--';
    // },

    singlePage() {
      return (
        (this.$route.meta?.singlePage ?? false) &&
        this.$route.query.rp === 'eventDetailsVisible'
      );
    }
  },
  watch: {
    eventDetailsVisibleF: {
      async handler(nv) {
        if (nv) {
           this.md_processing_Status={}
          this.$nextTick(()=>{
            // 渲染alert事件的表格
           let aa = setInterval(()=>{
                 if(this.$refs.echart_1){
                  this.renderChart()
                    clearInterval(aa)
                 }
            },1000)
          })
        
         
          // _________________________
          this.form.content = '';
          this.setState({ key: 'modalZIndex', payload: this.modalZIndex + 1 });
          this.modalZIndexM = this.modalZIndex;
          this.eduuid = this.$route?.query?.eduuid ?? new Date().getTime();
          const lsRow =
            sessionStorage.getItem(`ed${this.eduuid}`) ??
            localStorage.getItem('eRow') ??
            {};
          this.currentRow = JSON.parse(lsRow);
          
          // 获取管控状态日志
          const dataId = this.currentRow.id;
          this.handbookFIM = '';
          this.getHandbookFIM(dataId);
          this.getStateHistory(dataId);

          if (
            this.$store.state.setting.openType === '_blank' &&
            !this.$route?.query?.eduuid
          ) {
            this.goNewPageHandler(this.eduuid);
            this.setState({ key: 'eventDetailsVisible', payload: false });
          } else {
            this.getData();
          }

          // ---------------------
          getEventsStatusDetailApi(dataId).then(res=>{
            console.log('当前处理状态',res)
            if(res.code ==200){
              this.md_processing_Status = res.data
            }
          })

        } else {
          // this.setEMState({ key: 'dataType', payload: -1 });
          // this.setEMState({ key: 'dataTypeIndex', payload: [-1] });
        }
      },
      immediate: true
    }
  },
  mounted() {
    // 初始执行执行此
    this.getControlState();
  },
  methods: {
    update_status(){
      console.log('11我被执行了')
      this.md_processing_Status = {}
        const dataId = this.currentRow.id;
       getEventsStatusDetailApi(dataId).then(res=>{
            console.log('当前处理状态',res)
            if(res.code ==200){
              this.md_processing_Status = res.data
            }
          })
    },
    // 选中状态后,打开对应的表单
    corStatus(p){
      if(p){
        this.currentSta = p
        this.$refs.spform.open()
      }else{
        this.$message.warning('参数未加载到,请重试')
      }
    },
     // 获取echart数据
    async renderChart() {
        let itemName,serviceConfId,tailNumber
      const  res1 = await getServiceConfData({
                      tailnumber:this.currentRow.tailnumber,
                      code:this.currentRow.code
                    })
      console.log('我是条件',res1)
      if(res1.code ==200){
        itemName = res1.data.itemName
        serviceConfId = res1.data.serviceConfId
        tailNumber = res1.data.tailNumber
      }else{
        return
      }
      const data = {
        itemName,
        serviceConfId,
        tailNumber
      };
      const res =  await getChartDataApi(data);
      const servServiceEchartData = [...(res.data?.datas ?? []).filter(item => item.value && +item.value >= 0)];
      this.servServiceEchartData = res.data
      const initEchartsData = [];
      const lastoneData = [];
      const lastIndex = servServiceEchartData.findIndex(item => item.value && +item.value >= 0);
      const lastData = servServiceEchartData.splice(lastIndex, 1);
      lastoneData.push([lastData?.[0]?.time, lastData?.[0]?.value]);
      servServiceEchartData.forEach(item => {
        const singerData = [];
        singerData.splice(0, 0, item.time, item.value);
        initEchartsData.push(singerData);
      });
      
       this.initCharts1(initEchartsData, lastoneData);
      // this.$nextTick(() => {
      //   this.initCharts(initEchartsData, lastoneData);
      // });
    },
    // alert事件的图标
     initCharts1(data, theLastoneData) {
      const max = [...data, ...theLastoneData].flatMap(item => +item[1]);
      const maxNum = Math.max(...max);
      const dotAfLen = (String(maxNum).split('.')[1] ?? '').length;
      let step = maxNum * 0.05;

      if (dotAfLen !== 0) {
        step = this.$np.round(step, dotAfLen);
      } else {
        step = Math.ceil(step);
      }

      this.maxY = maxNum + step;
      this.minY = Math.min(...max) - step;

      console.log(maxNum, step, this.maxY, dotAfLen);
      const myChart = this.$echarts.init(this.$refs.echart_1);
      const lastDate = theLastoneData?.[0]?.[0] ?? new Date();

      const lastDateF = this.$moment(lastDate).format('YYYY-MM-DD');
      const firstDateF = this.$moment(lastDateF).add(-6, 'months').add(-1, 'day').format('YYYY-MM-DD');
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        title: {
          left: 'center',
          text: this.servServiceEchartData.summaryName ?? '',
          subtextStyle: { // 对应样式
            color: '#F27CDE',
            fontSize: 14,
            left: 'left'
          }
        },
        grid: {
          top: 74,
          left: 60,
          right: 44
        },
        xAxis: {
          type: 'time',
          name: '时间',
          // 开始时间
          min: new Date(firstDateF),

          splitLine: {
            show: false
          }
        },
        yAxis: {
          max: this.maxY,
          min: this.minY,
          name: this.servServiceEchartData.valueUnit ?? ''
        },
        series: [{
          symbolSize: 10,
          data,
          markLine: {
            symbol: ['none', 'none'], // 去掉箭头
            itemStyle: {
              normal: {
                label: { show: false, position: 'left' }
              }
            },
            data: [
              {
                name: '维修限额',
                yAxis: this.servServiceEchartData.serviceAlertLimit,
                silent: true,
                lineStyle: { type: 'dashed', color: '#F5A623' }
              },
              {
                name: '保养限额',
                yAxis: this.servServiceEchartData.operationalAlertLimit,
                silent: true,
                lineStyle: { type: 'dashed', color: '#E60000' }
              }
            ]
          },
          type: 'scatter',
          itemStyle: {
            normal: {
              color: '#EE5396'
            }
          },
          name: this.servServiceEchartData.summaryName ?? ''
        },
        {
          symbolSize: 10,
          name: 'Most Recent Date Point',
          data: theLastoneData,
          type: 'scatter',
          itemStyle: {
            normal: {
              color: '#1192E8'
            }
          }
        }]
      };
      // 绘制图表
      myChart.setOption(option);
    },
    openTab(url) {
      window.open(url);
    },
    getHandbookFIM(dataId) {
      const params = {};
      params.dataId = dataId;
      getHandbookFIM(params).then((res) => {
        if (!res) {
          return false;
        }
        if (res.code === 200) {
          const data = res.data;
          if (data && data.length > 0) {
            this.handbookFIM = data;
          }
        }
      });
    },
    getStateHistory(dataId) {
      this.controlStateLog = [];
      this.controlStateNew = [] ;
      this.controlStateNewHead={};
      const params = {};
      params.eventId = dataId;
      getStateHistory(params).then((res) => {
        if (!res) {
          return false;
        }
        if (res.code === 200) {
          const data = res.data;
          if (data && data.length > 0) {
            let leg=data.length;
            let eMap=data[0];
            this.controlStateNewHead.userName=eMap.userName;
            this.controlStateNewHead.createdTime=eMap.createdTime;
            for(var ye in this.colData){    
              let rule = this.colData[ye];   
              let hidden=rule.hidden;
              if(hidden){
                continue;
              }
              let statusCode=eMap.statusCode;
              let typelist=rule.type;
              if(!typelist.includes(statusCode)){
                continue;
              }
              let relevance=rule.relevance;
              if(relevance){
                let keylist=Object.keys(relevance);
                if(keylist.length > 0){
                  let keyy=keylist[0];
                  let vall=relevance[keyy];
                  let relevanceVal=eMap[keyy];
                  if(vall!=relevanceVal){
                    continue;
                  }
                }
              }
              let rulecode=rule.code;
              let val=eMap[rulecode];//数值
              if("ahmBenefit"==rulecode){
                //接口
                //val=值;
              }else if("actionTaken"==rulecode){
                //接口
                //val=值;
              }
              let showval=val;
              let optionMap=rule.option;
              if(optionMap&&Object.keys(optionMap).length>0){
                showval=optionMap[val];
              }
              let dataMap={};
              let value=rule.value;
              dataMap.key=value;
              dataMap.value=showval;
              this.controlStateNew.push(dataMap);
            }  
            if(leg>1){
              for (var i = 1; i < leg; i++){
                let eMapd=data[i];                        
                let statusCode=eMapd.statusCode;   
                let statuName=this.typeMap[statusCode]
                let dataMap={};
                dataMap.id=eMapd.id;
                dataMap.tailNumber=eMapd.tailNumber;
                dataMap.createdTime=eMapd.createdTime;
                dataMap.statuName=statuName;
                this.controlStateLog.push(dataMap);
              }
            }
          }
        }
      });
    },
    /* saveControlStateLog() {
      // console.log("保存点击");
      const newCode = this.selval.key;
      const newLabel = this.selval.label;
      const dataId = this.currentRow.id;
      const params = {};
      params.newCode = newCode;
      params.newLabel = newLabel;
      params.dataId = dataId;
      params.remark = this.opinionV;
      saveControlStateLog(params).then((res) => {
        if (!res) {
          return false;
        }
        if (res.code === 200) {
          this.currentRow.controlState = newLabel;
          this.opinionV = '';
          this.getControlStateLog(dataId);
        }
      });
    }, */
    getControlState() {
      getControlState().then((res) => {
        if (!res) {
          return false;
        }
        if (res.code === 200) {
          const data = res.data;
          //const reslist = [];
          this.typeMap={};
          for (var map of data) {
            /* const resmap = {};
            resmap.key = map.statuName;
            resmap.value = map.statusCode;
            reslist.push(resmap); */
            let key=map.statusCode;
			      this.typeMap[key]=map.statuName;            
          }
          // this.selectOptionS = reslist;
        }
      });
    },
    handleChange(e) {
      console.log(e);
    },
    tabCallback(v) {
      this.tabindex = v;
    },
    ...mapActions('eventMonitoring', [
      'getEventDetailByTailNumber',
      'addComment',
      'uploadFile',
      'downLoadFile',
      'removeFile',
      'getEventBySlope'
    ]),
    ...mapMutations('fraMonitoring', ['setState']),
    ...mapMutations('eventMonitoring', {
      setEMState: 'setState'
    }),
    ...mapActions('user', ['modifyByRead']),
    async getChart() {
      await this.getEventBySlope({
        code: this.currentSelectedRow.code,
        tailNumber: this.currentInfo.tailnumber
      });
      this.$nextTick(() => {
        this.initCharts();
      });
    },
    async getData() {
      const params = {
        tailNumber:
          this.currentRow.event?.tailnumber ?? this.currentRow.tailnumber,
        eventId: this.currentRow.event?.id ?? this.currentRow.id
      };
      await this.getEventDetailByTailNumber(params);
      this.clickHandler(0);
      this.reData = {
        ...this.currentRow,
        id: this.currentRow.legId || this.currentRow.id
      };
      localStorage.setItem('row', JSON.stringify(this.reData));
      this.$nextTick(() => {
        setTimeout(() => {
          document.querySelector('.file-list-box').scrollTop = 20000;
          document.querySelector('.ed-comment-item-box').scrollTop = 20000;
        }, 0);
      });
    },
    // 上一条
    prevEdHandler() {
      if (!this.preClickable) return;

      if (this.dataType === 1) {
        this.setState({
          key: 'activeIndex',
          payload: [this.dataAcIndex[0] - 1]
        });
      } else if (this.dataType === 2) {
        this.setEMState({
          key: 'dataTypeIndex',
          payload: [this.dataAcIndex[0] - 1]
        });
      } else {
        const data = [
          ...(this.getEventDetailData.currentFlights ?? []),
          ...(this.getEventDetailData.pastFlights ?? [])
        ];

        let di1 = (this.dataAcIndex[1] ?? 0) - 1;
        let di0 = this.dataAcIndex[0];
        if (di1 < 0) {
          di0 = this.dataAcIndex[0] - 1;
          if (data[di0]?.events) {
            di1 = Math.max(data[di0].events.length - 1, 0);
          } else {
            di1 = undefined;
          }
        }

        this.setEMState({ key: 'dataTypeIndex', payload: [di0, di1] });
      }

      this.changeEdHandler();
    },
    // 下一条
    nextEdHandler() {
      if (!this.nextClickable) return;

      if (this.dataType === 1) {
        this.setState({
          key: 'activeIndex',
          payload: [this.dataAcIndex[0] + 1]
        });
      } else if (this.dataType === 2) {
        this.setEMState({
          key: 'dataTypeIndex',
          payload: [this.dataAcIndex[0] + 1]
        });
      } else {
        const data = [
          ...(this.getEventDetailData.currentFlights ?? []),
          ...(this.getEventDetailData.pastFlights ?? [])
        ];
        let di0 = this.dataAcIndex[0];
        let di1;
        if (typeof this.dataAcIndex[1] === 'undefined') {
          di0 = this.dataAcIndex[0] + 1;
        }
        if (data[di0]?.events) {
          di1 =
            typeof this.dataAcIndex[1] !== 'undefined'
              ? this.dataAcIndex[1] + 1
              : 0;
          if (
            data[di0].events.length !== 0 &&
            data[di0].events.length === di1
          ) {
            di0 += 1;
            di1 = undefined;
          }
        }
        this.setEMState({ key: 'dataTypeIndex', payload: [di0, di1] });
      }
      this.changeEdHandler();
    },

    changeEdHandler() {
      this.debounceGet();
      let data = this.eventList;
      let acIndex = this.activeIndex;
      let record = {};
      let currentRow = {};
      if (this.dataType === 1) {
        // 事件监控/历史事件
        record = data?.[acIndex[0]] ?? {};
        currentRow = { ...record, ...(record.event ?? {}) };
      } else if (this.dataType === 2) {
        // 消息
        data = this.noticeList;
        acIndex = this.dataTypeIndex;
        record = data?.[acIndex[0]] ?? {};
        record.read = 1;
        currentRow = {
          ...record,
          tailnumber: record.tailNumber,
          id: record.eventId,
          event: {
            ...record,
            id: record.eventId,
            tailnumber: record.tailNumber
          }
        };
        const params = {
          id: record.id,
          isAll: 0,
          userId: this.userInfo.userId
        };
        this.modifyByRead(params);
      } else if (this.dataType === 3) {
        // 航段详情
        data = [
          ...(this.getEventDetailData.currentFlights ?? []),
          ...(this.getEventDetailData.pastFlights ?? [])
        ];
        acIndex = this.dataTypeIndex;
        record = data?.[acIndex[0]] ?? {};
        const currentItem = localStorage.getItem('faCItem') ?? '{}';
        if (record?.events) {
          const childData = (record.events ?? [])?.[acIndex[1]] ?? {};
          currentRow = {
            ...record,
            event: { ...childData },
            ...JSON.parse(currentItem),
            ...record.ftmFlightLeg
          };
        } else {
          currentRow = {
            event: { ...record },
            ...JSON.parse(currentItem),
            ...record.ftmFlightLeg
          };
        }
      }
      localStorage.setItem('eRow', JSON.stringify(currentRow));
    },
    // 防抖
    debounceGet: debounce(function() {
      this.setState({ key: 'eventDetailsVisible', payload: true });
    }, 230),
    initCharts() {
      // const data = (this.eventBySlope?.dates ?? [])
      //   .filter(item => Object.prototype.toString.call(item.slope) !== '[object Null]')
      //   .flatMap(item => [[item.time, item.slope]]);
      const dataSca = (this.eventBySlope?.dates ?? [])
        .filter(
          (item) =>
            Object.prototype.toString.call(item.value) !== '[object Null]'
        )
        .flatMap((item) => [[item.time, item.value]]);
      const lastData = [dataSca.pop()];
      const myChart = this.$echarts.init(this.$refs.echart);
      const _this = this;
      const option = {
        title: {
          left: 'center',

          text: 'Left Hydraulic system fluid level -At engine shutdown'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function(params, ticket, callback) {
            var showHtm = 'Slope：' + _this.eventBySlope.slope + '<br>';
            for (var i = 0; i < params.length; i++) {
              // x轴名称
              var typeName = params[i]['seriesName'];
              // 名称
              // 值
              var value = params[i]['data'][1];
              if (typeName !== 'line') {
                showHtm += typeName + ' ：' + value;
              }
            }

            return showHtm;
          }
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false
          },
          name: 'Date'
        },

        grid: {
          top: 74,
          left: 60,
          right: 44
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],

          name: 'Reservoir Level'
        },
        series: [
          {
            symbolSize: 10,
            type: 'line',
            name: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: [dataSca[0], lastData[0]],
            itemStyle: {
              normal: {
                color: '#10bf63'
              }
            }
          },
          {
            symbolSize: 10,
            data: dataSca,
            name: 'Current Regression',
            type: 'scatter',
            itemStyle: {
              normal: {
                color: '#EE5396'
              }
            }
          },
          {
            symbolSize: 10,
            name: 'Most Recent Date Point',
            data: lastData,
            type: 'scatter',
            itemStyle: {
              normal: {
                color: '#1192E8'
              }
            }
          }
        ]
      };

      // 绘制图表
      myChart.setOption(option);
    },
    beforeUpload(file) {
      this.fileList = [file];
      const { fileList } = this;
      const formData = new FormData();
      fileList.forEach((file) => {
        formData.append('file', file);
      });
      this.uploadFile({ formData, eventId: this.eventDetail[0].id }).then(
        (res) => {
          if (res) {
            this.getData();
          }
        }
      );
      return false;
    },
    // dotType(activity) {
    //   return activity ? this.activeList.find(item => item.value === activity)?.name ?? '--' : '--';
    // },
    downloadFileHandler(fileName) {
      this.downLoadFile({ fileName }).then((res) => {
        const FileName = decodeURI(
          res.headers['content-disposition'].split(';')[1].split('=')[1]
        );
        const type = decodeURI(res.headers['content-type']);
        downloadUrl(res.data, FileName, type);
      });
    },
    saveEdContent() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = {
            content: this.form.content,
            legId: this.eventDetail?.[0]?.legId,
            createBy: this.userInfo?.username ?? '',
            createTime: this.$moment
              .utc(new Date())
              .format('YYYY-MM-DD HH:mm:ss')
          };
          this.addComment(params).then((res) => {
            if (res) {
              this.getData();
              this.form.content = '';
            }
          });
        }
      });
    },
    // 当drawer点击关闭
    onClose() {
      this.$emit('close', 'eventDetailsVisible');
    },
    dotNumHandler(di) {
      const step = Math.min(
        3,
        Math.abs(
          this.$legHandler(this.currentInfo.leg, this.currentRow.totalLeg)
        )
      );
      return (
        di -
        15 +
        this.$legHandler(this.currentInfo.leg, this.currentRow.totalLeg) +
        step
      );
    },
    reportHandler(e, record, flag, index, select = false) {
      e.stopPropagation();
      const currentRow = {
        ...record
      };
      if (flag === 'taskResearchVisible') {
        localStorage.setItem('trRow', JSON.stringify({ ...record }));
        this.setState({ key: 'eventDetailsVisible', payload: false });

        if (this.$store.state.setting.openType === '_self') {
          this.$router.push({ path: 'taskResearch', query: { m: '1' }});
        } else {
          const eduuid = new Date().getTime();
          const routeData = this.$router.resolve({
            path: 'taskResearch',
            query: { m: '1', eduuid }
          });
          window.open(routeData.href, this.$store.state.setting.openType);
        }
      }
      localStorage.setItem('eRow', JSON.stringify(currentRow));
      this.setState({ key: flag, payload: true });
    },
    airportInfoHandler(code) {
      this.setState({ key: 'airportInfoVisible', payload: true });
      localStorage.setItem('apInfoCode', code);
    },
    reportHandler2(e, record, flag) {
      e.stopPropagation();
      const currentRow = {
        ...record
      };

      localStorage.setItem('row', JSON.stringify(currentRow));
      this.setState({ key: flag, payload: true });
    },
    clickHandler(index, cIndex = -1) {
      this.itemActiveIndex = index;
      this.itemActiveCIndex = cIndex;
      if (cIndex === -1) {
        if (this.currentSelectedRow?.detectedBy) {
          if (
            Object.prototype.toString.call(
              this.currentSelectedRow?.detectedBy
            ) === '[object Array]'
          ) {
            this.deletedBy = this.currentSelectedRow?.detectedBy ?? ['--'];
          } else {
            this.deletedBy = [this.currentSelectedRow?.detectedBy];
          }
        } else {
          const allDb = [];
          for (const item of this.currentSelectedRow?.eventDetails ?? []) {
            if (
              Object.prototype.toString.call(item?.detectedBy) ===
              '[object Array]'
            ) {
              allDb.push(...item.detectedBy);
            } else {
              allDb.push(item?.detectedBy);
            }
          }
          this.deletedBy = allDb;
        }
      } else {
        this.deletedBy = this.currentSelectedRow?.detectedBy ?? ['--'];
      }
      // if (this.showChart) {
      //   this.getChart();
      // }
    },
    // 计算事件点的偏移
    dotOffsetLeft(mt) {
      const e = this.currentInfo.inTime || this.currentInfo.eta;
      const dt = this.$moment
        .utc(e)
        .diff(this.$moment.utc(this.currentInfo.outTime), 'minute');
      const msgdt = this.$moment
        .utc(mt)
        .diff(this.$moment.utc(this.currentInfo.outTime), 'minute');
      return `${(msgdt / dt) * 100}%`;
    },
    // 删除文件
    delItemHandler({ url, name }) {
      this.removeFile({ fileName: url }).then((res) => {
        if (res) {
          const fileIndex = (this.eventDetail[0]?.files ?? []).findIndex(
            (item) => item.name === name
          );
          if (fileIndex > -1) {
            // const u = [...this.eventDetail[0].files];
            // u.splice(fileIndex, 1);
            // this.eventDetail[0].files = [...u];
            this.getData();
          }
        }
      });
    },
    goNewPageHandler(eduuid = this.eduuid) {
      sessionStorage.setItem(`ed${eduuid}`, JSON.stringify(this.currentRow));

      const routeData = this.$router.resolve({
        path: '/reportsLayout',
        query: {
          rp: 'eventDetailsVisible',
          eduuid
        }
      });

      window.open(routeData.href, '_blank');
    }
  }
};
</script>
<style scoped lang="less">
.ed-dialog-box .ed-details-item-li-in {
  height: auto !important;
}
.text-over {
  overflow: visible;
  white-space: normal;
}
.spanws {
  white-space: nowrap;
}
.colorBlue {
  color: #5a87f7;
  font-size: 16px;
}
.tabdiv {
  overflow-y: auto;
  overflow-x: hidden;
  flex-direction: column;
  display: flex;
  padding-right: 3px;
}
.tabdiv {
  overflow-y: auto;
  overflow-x: hidden;
  flex-direction: column;
  display: flex;
  padding-right: 3px;
}
.tabdiv::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.tabdiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background-color: #fff0; //透明
}
.tabdiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background-color: #c6ccd7;
  border-radius: 10px;
}
.hide_circle .ehbi-dot-ak {
  border: 1px solid #ffffff00;
}
.alertDiv {
  min-height: 60px;
}
</style>
<style lang="less">
@import './index.less';
.legendBox {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  .APU-item,
  .recent-item {
    display: flex;
    align-items: center;
    margin-right: 15px;
    div {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #EE5396;
      margin-right: 5px;
    }
  }

  .recent-item{
    div {
       background: #1192E8;
    }
  }
  .service-limit-item {
    margin-right: 15px;
    img {
      width: 25px;
      height: 25px;
      margin-right: 5px;
    }
  }
}
</style>
